<template>
  <div class="action-buttons">
    <div v-show="params.data[params.field]">
      <el-tag :type="colorTag(params.data[params.field]) || 'info'">
        {{ params.data[params.field] }}
      </el-tag>
    </div>
  </div>
</template>

<script>
import { colorTag } from "@/utils/colorTag";

export default {
  name: "TagComponent",
  props: {
    params: {
      type: Object,
      required: true,
      default: () => ({
        data: {},
        field: "",
      }),
    },
  },
  methods: {
    colorTag,
  },
};
</script>

<style lang="scss">
.action-buttons {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
}
</style>
